<template>
  <div class="social-media-form">
    <!-- <p>联系方式</p> -->
    <el-table :data="formData" border style="width: 100%" :show-header="false">
      <el-table-column prop="platform" label="平台" width="120" class-name="bg-[#f5f7fa]">
        <template #default="{ row }">
          <span class="text-[#666]">{{ row.platform }}</span>
          <span v-if="row.required" class="text-[#f56c6c]">*</span>
        </template>
      </el-table-column>
      <el-table-column prop="input" label="输入">
        <template #default="{ row }">
          <el-input
            v-model="row.value"
            :placeholder="row.placeholder"
            clearable
            class="no-border-input"
            @change="() => $emit('update:formData', formData)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps(['formDataEdit', 'onlineService'])
const formData = ref([
  {
    platform: 'facebookContact',
    placeholder: '请输入，建议填写FB个人ID，也可以指定URL链接',
    value: '',
    required: false,
    tip: ''
  },
  {
    platform: 'messengerContact',
    placeholder: '请输入，填写ID',
    value: '',
    required: false,
    tip: ''
  },
  {
    platform: 'instagramContact',
    placeholder: '请输入，建议填写FB个人ID，也可以指定URL链接',
    value: '',
    required: false,
    tip: ''
  },
  {
    platform: 'whatsappContact',
    placeholder: '请输入，例8614242424716',
    value: '',
    required: false,
    tip: '示例格式：8614242424716'
  },
  {
    platform: 'lineContact',
    placeholder: '请输入，填写line二维码后缀链接或URL链接',
    value: '',
    required: false,
    tip: ''
  },
  {
    platform: 'phone',
    placeholder: '请输入，例：177XXXXXXXXXX',
    value: '',
    required: false,
    tip: '示例格式：177XXXXXXXXXX'
  },
  {
    platform: 'email',
    placeholder: '请输入，例：XXXX@XXX.COM',
    value: '',
    required: false,
    tip: '示例格式：XXXX@XXX.COM'
  }
])
const getRequired = (platform: string) => {
  formData.value?.map((item) => {
    if (item.platform === platform) {
      item.required = true
    } else {
      item.required = false
    }
  })
  console.log('222', platform)
}
// watch(
//   () => props.onlineService,
//   (newVal) => {
//     console.log('formData changed', newVal)
//     // console.log(formData.value)
//   }
// )
watch(
  () => props.formDataEdit,
  (newVal) => {
    formData.value?.map((item, index) => {
      switch (item.platform) {
        case 'facebookContact':
          item.value = newVal.facebookContact
          break
        case 'messengerContact':
          item.value = newVal.messengerContact
          break
        case 'instagramContact':
          item.value = newVal.instagramContact
          break
        case 'whatsappContact':
          item.value = newVal.whatsappContact
          break
        case 'lineContact':
          item.value = newVal.lineContact
          break
        case 'phone':
          item.value = newVal.phone
          break
        case 'email':
          item.value = newVal.email
          break
      }
    })
  }
)
// 抛出getRequired
defineExpose({ getRequired })
</script>

<style scoped>
.no-border-input :deep(.el-input__wrapper) {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent;
}

/* 鼠标悬停时也保持无边框 */
.no-border-input :deep(.el-input__inner:hover),
.no-border-input :deep(.el-input__inner:focus) {
  border: none !important;
  box-shadow: none !important;
}
.social-media-form {
  /* padding: 20px; */
}

.el-table {
  /* margin-top: 20px; */
}

.el-input {
  width: 100%;
}

.input-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

:deep(.el-table__header-wrapper) th {
  background-color: #f5f7fa;
  font-weight: bold;
}
</style>
